작성일/수정일
2024-04-30 11:57:54 / 2024-04-30 11:57:54
1 Sass 설치.
1) node.js 설치
2) 글로벌로 node-sass 설치
> $ npm install -g node-sass
> $ npm-sass -v (버젼확인)
1 Sass visual studio code 설치.
1) vscode 확장기능
- live Server 추가
- Sass 추가
- Live Sass compiler
2. 명령어
> $ node-sass [옵션] <인풋파일> <아웃파일>
> $ node-sass -w scss/style.scss css/style.css --output-style compressed
//원본
https://okayoon.tistory.com/entry/VSCode-extension%EC%9C%BC%EB%A1%9C-SASSSCSS%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90
https://webclub.tistory.com/56?category=541910
** 변수설정
-- PHP처럼 $변수명 변수의 설정 가능값 문자열, 숫자, 불표현식, 리스트, null
/*
$변수 : 속성값;
$변수 : 속성값 !default;
*/
$fsize : 14px;
$bsWith : 100%;
.ls_area { width:$bsWidth;
.ls {poisotion:relative; width:$bsWith; font-size:$fsize; margin-right:10px;
&:last-child { margin-right:0px; }
}
}
$color : red, green, blue
h3:nth-child(1) {color: nth($color, 1); }
h3:nth-child(2) {color: nth($color, 2); }
h3:nth-child(3) {color: nth($color, 3); )
//변수 map-get($fnt_weight, 'bold')
$fnt_weight : ("regular":400, "medium":500, "bold":600);
//적용
h3:nth-child(1) { font-weight: map-get($fnt-weight,"regular") }
h3:nth-child(2) { font-weight: map-get($fnt-weight,"medium") }
h3:nth-child(3) { font-weight: map-get($fnt-weight,"big")}
@mixin, @include
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(20px); }
//기본값 지정
@mixin border-style ($px:1px, $style:solid, $color:red){
border: $px $style $color;
}
** import
_파일명.scss 파일은 별도 파일을 생성하지 않는다 import용 파일
//파일명은 _header.scss, _footer.scss layout.scss 파일에 import
import "header", "footer";